Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },

  properties: {
    label: {
      type: String,
      value: ''
    },
    value: {
      type: String,
      value: ''
    },
    placeholder: {
      type: String,
      value: ''
    },
    type: {
      type: String,
      value: 'text'
    },
    maxlength: {
      type: Number,
      value: -1
    },
    required: {
      type: Boolean,
      value: false
    },
    error: {
      type: String,
      value: ''
    },
    help: {
      type: String,
      value: ''
    },
    disabled: {
      type: Boolean,
      value: false
    },
    readonly: {
      type: Boolean,
      value: false
    },
    textarea: {
      type: Boolean,
      value: false
    },
    focus: {
      type: Boolean,
      value: false
    },
    clearable: {
      type: Boolean,
      value: true
    },
    confirmType: {
      type: String,
      value: 'done'
    },
    autoHeight: {
      type: Boolean,
      value: true
    },
    showConfirm: {
      type: Boolean,
      value: false
    }
  },

  data: {
    focused: false,
    hasHeaderSlot: false
  },

  methods: {
    onInput(event) {
      const { value = '' } = event.detail || {};
      this.setData({ value });
      this.triggerEvent('input', { value });
    },

    onFocus(event) {
      this.setData({ focused: true });
      this.triggerEvent('focus', event.detail || {});
    },

    onBlur(event) {
      this.setData({ focused: false });
      this.triggerEvent('blur', event.detail || {});
    },

    onClear() {
      if (this.data.disabled || this.data.readonly) {
        return;
      }
      this.setData({ value: '' });
      this.triggerEvent('clear');
      this.triggerEvent('input', { value: '' });
    },

    handleHeaderSlot() {
      this.setData({ hasHeaderSlot: true });
    }
  }
});
